<template>
    <div class="table">
      <div class="crumbs">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>
            <span class="container-title-p">
              用户管理
              <i class="iconfont icon-jiantou"></i>
            </span>
            <span>分组管理</span>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="handle-box">
        <el-button type="primary" icon="el-icon-delete" class="handle-del mr10" @click="delAll" size="small">批量删除</el-button>
        <el-button type="success" icon="el-icon-plus" class="handle-del mr10" @click="updateNewsType=true" size="small">添加分组</el-button>
      </div>
      <el-table :data="typeCenter" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="a_type_name" label="分组名称" >
        </el-table-column>
        <el-table-column label="操作" width="250" >
          <template scope="scope">
            <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
          </el-table-column>
      </el-table>
      <el-dialog title="用户分组" :visible.sync="updateNewsType" width="20%">
        <el-form  label-width="80px">
          <el-form-item label="分组名称:">
            <el-input v-model="typeName" auto-complete="off" size="small"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
           <el-button type="default" @click="closeEdit" size="small">关闭</el-button>
          <el-button type="success" @click="saveNewsType" size="small">保存</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
import * as rpConfig from "../../../../rpConfig/constant";
import { HttpReq } from "../../../service/server";
var Server = new HttpReq();
export default {
  data() {
    return {
      typeCenter: [{"a_type_name":"分组一"},{"a_type_name":"分组二"}],
      updateNewsType:false,
      typeName:"",
      typeID:0,
      multipleSelection:[]
    };
  },
  created() {
   // this.getType();
  },
  computed: {},
  methods: {
    getType() {
      let self = this;
      Server._POST(
        rpConfig.API_URI + "/muser.Index/getUserGroup",
        {},
        function(response) {
          //console.log(response);
          self.typeCenter = response.data;
        }
      );
    },
    closeEdit(){
      this.updateNewsType=false
      this.typeID=0
      this.typeName=""
    },
    handleEdit(row) {
      this.updateNewsType=true
      this.typeID=row.a_tid
      this.typeName=row.a_type_name
    },
    handleDelete(row) {
      let self = this;
      Server._POST(
        rpConfig.API_URI + "/muser.Index/deleteUserGroupItem",
        { item_id: [row.a_tid] },
        function(response) {
          self.$message.success(response.msg);
          self.getType();
        }
      );
    },
    delAll() {
      const self = this,
        length = self.multipleSelection.length;
      let delArr = [];
      for (let i = 0; i < length; i++) {
        delArr.push(self.multipleSelection[i].a_tid);
      }
      if (delArr.length == 0) {
        self.$message.info("请选择要删除的记录");
      } else {
        Server._POST(
          rpConfig.API_URI + "/muser.Index/deleteUserGroupItem",
          { item_id: delArr },
          function(response) {
            self.$message.success(response.msg);
            self.getType();
          }
        );
      }
      self.multipleSelection = [];
    },
    saveNewsType(){
      let self = this;
      Server._POST(
        rpConfig.API_URI + "/muser.Index/updateUserGroupItem",
        { a_type_name:self.typeName,a_tid:self.typeID},
        function(response) {
          self.$message.success(response.msg);
          self.getType();
          self.closeEdit()
        }
      );
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}
.handle-select {
  width: 120px;
}
.handle-input {
  width: 300px;
  display: inline-block;
}
</style>